<template>
	<div class="dashboard-container">
		<!-- <el-card style="height: 120px; margin-bottom: 20px">
      <el-form label-width="80px" :model="form" :inline="true">
        <el-form-item>
          <el-input v-model="form.name" placeholder="关键词搜索" clearable />
        </el-form-item>
        <el-form-item>
          <el-select v-model="form.copywritingtypeid" placeholder="文案分类" filterable>
            <el-option v-for="a in reqCategory1" :key="a.id" :label="a.name" :value="a.id"></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchclick" style="margin-left: 12px">筛选</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button @click="addrenyuan" type="success">添加</el-button>
      </el-form>
    </el-card> -->
		<el-card style="height: 140px; margin-bottom: 20px">
			<el-form label-width="80px" :model="form" :inline="true">
				<el-form-item>
					<el-input v-model="form.phone" placeholder="手机号搜索" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.name" placeholder="名称搜索" clearable />
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.id" placeholder="通过id搜索" clearable />
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
			</el-form>
			<el-tabs v-model="activeName" @tab-click="handleClick">
				<el-tab-pane label="全部" name="0"></el-tab-pane>
				<el-tab-pane label="认证中" name="1"></el-tab-pane>
				<el-tab-pane label="已认证" name="2"></el-tab-pane>
			</el-tabs>
		</el-card>
		<el-table :data="tableData" border style="width: 98%;margin-left: 1%;">
			<el-table-column prop="id" label="id">
			</el-table-column>
			<el-table-column prop="shh" label="商户号">
			</el-table-column>
			<el-table-column label="头像" align="center" width="90">
				<template slot-scope="scope">
					<div class="">
						<el-image style="width: 70px; height: 70px" :src='scope.row.logo'></el-image>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="nickname" label="昵称">
			</el-table-column>
			<el-table-column prop="name" label="门店名称">
			</el-table-column>
			<el-table-column prop="phone" label="联系电话">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="" label="状态">
				<template slot-scope="scope">
					<div v-if="scope.row.status==1">
						<el-tag>认证中</el-tag>
					</div>
					<div v-else-if="scope.row.status==2">
						<el-tag type="success">已认证</el-tag>
					</div>
				</template>
			</el-table-column>
			<el-table-column prop="" label="支付方式 ">
				<template slot-scope="scope">
					<div v-if="scope.row.paystatus==1">
						在线支付
					</div>
					<div v-if="scope.row.paystatus==2">
						平台代收款
					</div>
					<div v-if="scope.row.paystatus==3">
						到店支付
					</div>
					
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center">
				<template slot-scope="scope">
					<div class="" style="display: flex;flex-warp:wrap">
						<el-button v-if="scope.row.status==1" type="primary" @click="passIden(scope.row)"
							size="small">认证</el-button>

						<el-button type="primary" @click="editsh(scope.row)" size="small">修改商户号/支付方式</el-button>
					</div>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="修改商户号/支付方式" :visible.sync="dialogSH">
			<el-form :model="Shform">
				<el-form-item label="商户号" :label-width="formLabelWidth">
					<el-input style="width: 300px;" v-model="Shform.shh" autocomplete="off"></el-input>
				</el-form-item>
				<el-form-item label="支付方式" :label-width="formLabelWidth">
					<el-select v-model="Shform.paystatus" placeholder="请选择">
						<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogSH = false">取 消</el-button>
				<el-button type="primary" @click="submitSh">确 定</el-button>
			</div>
		</el-dialog>
		<Pagination2 :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total"
			@changelimit="changelimit" @changecurrentPage="changecurrentPage"></Pagination2>
		<!-- <add ref="add" @refresh="refresh"></add> -->
	</div>
</template>

<script>
	import {
		storeList,
		storeAuth,
		shanghushh
	} from "@/api/store";
	export default {
		name: "Dashboard",
		components: {},
		data() {
			return {
				formLabelWidth: '120px',
				activeName: '0',
				total: 0,
				tableData: [],
				form: {
					id: '',
					name: '',
					status: 0, //1认证中 2已认证 0全部
					phone: "",
					pageNo: 1,
					pageSize: 15,
				},
				dialogSH: false,
				Shform: {
					id: '',
					shh: '',
					paystatus: ''
				},
				options: [{
					value: '1',
					label: '在线支付'
				}, {
					value: '2',
					label: '平台代收款 '
				}, {
					value: '3',
					label: '到店支付'
				}],
				value: ''
			};
		},

		methods: {
			resetSearch() {
				this.form.phone = "";
				this.form.name = "";
				this.form.id = "";
				this.getStoreList();
			},
			searchclick() {
				this.getStoreList()
			},
			async passIden(val) {
				this.$confirm('是否通过认证', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					storeAuth({
						id: val.id
					}).then(resp => {
						if (resp.code == 0) {
							this.$message({
								type: 'success',
								message: '已认证'
							})
							this.getStoreList()
						} else {
							this.$message({
								type: 'error',
								message: resp.msg
							});
						}
					})
				})
			},
			handleClick(tab, event) {
				this.activeName = tab.index
				this.form.status = parseInt(tab.index)
				this.getStoreList()
			},
			async getStoreList() {
				let result = await storeList({
					id: parseInt(this.form.id),
					name: this.form.name,
					status: 0, //1认证中 2已认证 0全部
					phone: this.form.phone,
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize
				});
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.total = result.data.totalCount;
						this.tableData.forEach((item, index) => {
							// if (item.iamges != "") {
							//   this.$set(item, "images", item.images.split(","));
							// }
						});
					}
				}
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getStoreList();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getStoreList();
			},

			// 修改商户号 支付方式
			editsh(val) {
				this.Shform.id = val.id;
				this.dialogSH = true;
			},
			async  submitSh() {
				if (this.Shform.paystatus == '' && this.Shform.shh == '') {
					this.$message({
						message: '至少修改一处',
						type: 'warning'
					})
					return;
				}
				let result = await shanghushh({
					id: parseInt(this.Shform.id),
					shh:this.Shform.shh,
					paystatus:parseInt(this.Shform.paystatus)
				});
				if(result.code==0) {
					this.$message({
						message: '修改成功',
						type: 'success'
					})
					this.dialogSH = false;
					this.Shform.shh='';
					this.Shform.paystatus='';
					this.getStoreList();
				}
			}
		},
		watch: {

		},
		mounted() {
			this.getStoreList()
		},
	};
</script>

<style lang="scss" scoped>
	// .dashboard {
	//   &-container {
	//     margin: 30px;
	//   }
	//   &-text {
	//     font-size: 30px;
	//     line-height: 46px;
	//   }
	// }
</style>